<script setup>

//获取父组件传过来的item
const props = defineProps(['item'])
const ITEM=props.item

</script>

<template>


  <div class="animate-card animate-card-2">
    <div class="animate-card__layer">
      <img style="width: 190px;" :src="ITEM.imgUrl"/>
    </div>

    <div class="animate-card__sublayer">

      <span style="font-size: 14px;
      padding: 0;

      font-family:'Microsoft YaHei,',serif;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow:ellipsis;">
       {{ ITEM.title }}
      </span>

      <div>
       <span style="font-size: 22px;color: #cf4444"> ¥{{ITEM.price}}</span>
      </div>

    </div>
  </div>

</template>

<style scoped lang="less">


.animate-card {
  height: 130px;
  width: 190px;
  position: relative;
  overflow: hidden;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4),
  0px 7px 13px -3px rgba(0, 0, 0, 0.3),
    0px -3px 0px 0px rgba(0, 0, 0, 0.2) inset;
}

.animate-card:hover{
  cursor: pointer;

}

.animate-card-2 {

  .animate-card {
    &__layer {
      width: 100%;
      height: 100%;
      transition: 0.5s;

      & > img {
        width: 100%;
        height: 100%;
      }
    }

    &__sublayer {
      position: absolute;
      top: 100%;
      left: 0;
      height: 100%;
      width: 100%;
      //padding: 45px 20px 20px;

      text-align: center;
      background-color: #fff;
      color: #000;
      opacity: 0.9;
      transition: 0.5s;
    }
  }

  &:hover {
    .animate-card {
      &__layer {
        transform: scale(1.2);
      }

      &__sublayer {
        top: 0;
      }
    }
  }
}



</style>